import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import MenuItem from "./MenuItem";
import { MenuItemConfig, IconRenderer } from "./types";
import { useTheme } from "@/contexts/ThemeContext";

/**
 * @typedef {Object} MenuRendererProps - 菜单渲染器组件属性
 */
interface MenuRendererProps {
  /** 要渲染的菜单项配置数组 */
  items: MenuItemConfig[];
  /** 菜单项选择回调 */
  onItemSelect: (item: MenuItemConfig) => void;
  /** 自定义图标渲染函数 */
  iconRenderer?: IconRenderer;
  /** 菜单项样式 */
  itemStyle?: any;
  /** 菜单项文本样式 */
  itemTextStyle?: any;
  /** 选择后是否自动关闭菜单 */
  closeOnSelect?: boolean;
  /** 当前嵌套深度，用于多级菜单 */
  depth?: number;
  /** 图标尺寸 */
  iconSize?: number;
}

/** 最大支持的子菜单嵌套层数 */
const MAX_DEPTH = 2;

/**
 * 默认的图标渲染函数
 * 使用Ionicons图标库渲染菜单图标
 *
 * @example
 * ```tsx
 * // 直接使用
 * const icon = defaultIconRenderer("settings", 20, "#333", { marginRight: 10 });
 *
 * // 在菜单项中使用
 * <MenuItem leftIcon={defaultIconRenderer("settings", 20, "#333")} />
 * ```
 */
export const defaultIconRenderer: IconRenderer = (name, size, color, style) => {
  // 安全地将字符串转换为Ionicons名称
  return (
    <Ionicons name={name as any} size={size} color={color} style={style} />
  );
};

/**
 * @author BelovedLYC
 * 菜单渲染器组件 - 负责渲染菜单项及其子菜单
 *
 * 这是一个内部组件，通常不需要直接使用，而是通过 Menu 组件的 items 属性传递配置使用。
 *
 * @component
 * @example
 * ```tsx
 * // 内部使用示例，通常不需要直接使用此组件
 * <MenuRenderer
 *   items={menuItems}
 *   onItemSelect={handleItemSelect}
 *   iconRenderer={customIconRenderer}
 *   itemStyle={styles.menuItem}
 * />
 *
 * // 配置示例 - 通过 Menu 的 items 属性传递给菜单组件
 * const menuItems = [
 *   {
 *     id: "settings",
 *     label: "设置",
 *     icon: "settings-outline",
 *     onPress: "setting"
 *   },
 *   {
 *     id: "share",
 *     label: "分享",
 *     icon: "share-outline",
 *     children: [
 *       {
 *         id: "wechat",
 *         label: "微信",
 *         icon: "logo-wechat",
 *         onPress: "share-wechat"
 *       }
 *     ]
 *   }
 * ];
 * ```
 */
const MenuRenderer: React.FC<MenuRendererProps> = ({
  items,
  onItemSelect,
  iconRenderer = defaultIconRenderer,
  itemStyle,
  itemTextStyle,
  closeOnSelect = true,
  depth = 0,
  iconSize = 20,
}) => {
  const { colors } = useTheme();
  // 跟踪当前展开的子菜单ID
  const [expandedItemId, setExpandedItemId] = useState<string | null>(null);

  /**
   * 处理菜单项点击事件
   * 如果是带子菜单的项目，切换展开/折叠状态
   * 如果是普通项目，触发选择回调
   */
  const handleItemPress = (item: MenuItemConfig) => {
    if (item.disabled) return;

    // 如果有子菜单，切换展开状态
    if (item.children && item.children.length > 0) {
      setExpandedItemId(expandedItemId === item.id ? null : item.id);
      return;
    }

    // 调用父组件提供的回调
    onItemSelect(item);
  };

  return (
    <>
      {items.map((item) => (
        <React.Fragment key={item.id}>
          {/* 菜单项 */}
          <MenuItem
            label={item.label}
            leftIcon={
              item.icon
                ? iconRenderer(
                    item.icon,
                    iconSize,
                    item.iconColor || colors.text.primary,
                    { marginRight: 10 }
                  )
                : undefined
            }
            rightIcon={
              item.children && item.children.length > 0 ? (
                <Ionicons
                  name={
                    expandedItemId === item.id ? "chevron-up" : "chevron-down"
                  }
                  size={16}
                  color={colors.text.secondary}
                />
              ) : undefined
            }
            color={item.color || colors.text.primary}
            onPress={() => handleItemPress(item)}
            style={[
              itemStyle,
              depth > 0 && [
                styles.subMenuItem,
                { backgroundColor: colors.backgroundLight },
              ],
            ]}
            textStyle={itemTextStyle}
            disabled={item.disabled}
          />

          {/* 渲染子菜单（如果当前项被展开且有子菜单） */}
          {item.children &&
            item.children.length > 0 &&
            expandedItemId === item.id &&
            depth < MAX_DEPTH && (
              <View
                style={[
                  styles.subMenuContainer,
                  { borderLeftColor: colors.border.divider },
                ]}
              >
                <MenuRenderer
                  items={item.children}
                  onItemSelect={onItemSelect}
                  iconRenderer={iconRenderer}
                  itemStyle={itemStyle}
                  itemTextStyle={itemTextStyle}
                  closeOnSelect={closeOnSelect}
                  depth={depth + 1}
                  iconSize={iconSize}
                />
              </View>
            )}
        </React.Fragment>
      ))}
    </>
  );
};

const styles = StyleSheet.create({
  subMenuContainer: {
    paddingLeft: 10,
    borderLeftWidth: 1,
    marginLeft: 10,
  },
  subMenuItem: {},
});

export default MenuRenderer;
